<template>
  <div class="heatMap">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        :label="item.label"
        :name="item.value"
        v-for="item in heatOptions"
        :key="item.value"
      >
        <heat-chart class="tabs-fill" v-if="activeName === 0"></heat-chart>
        <heat-map class="tabs-fill" v-else></heat-map>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import heatChart from '@/components/sciChartComponents/subComponents/heatChart.vue';
import heatMap from '@/components/sciChartComponents/subComponents/heatMap.vue';

const heatOptions = [
  { label: '均匀热力图', value: 0 },
  { label: '非均匀热力图', value: 1 },
];

const activeName = ref(0);

const handleClick = val => {
  activeName.value = val.props.name;
};
</script>

<style scoped lang="scss">
.heatMap {
  width: 100%;
  height: 100%;
  :deep(.el-tabs__item) {
    font-size: 18px !important;
  }
  .demo-tabs {
    width: 100%;
    height: 100%;
    .tabs-fill {
      width: 100%;
      height: calc(100vh - 180px);
    }
  }
}
</style>
